<template>
    <div class="dialogbox">
        <div :class="data.isSend === 'true'?'dialogboxright boxright':'dialogboxleft boxleft'">
            {{ data.isSend === 'true' && data.realname ? '('+data.realname+')' : '' }} {{ data.create_time }}
        </div>
        <div :class="data.isSend === 'true' ? 'dialogboxright' : 'dialogboxleft'">
            <!-- {{wechatrecord}} -->
            <img v-if="data.isSend !== 'true' && wechatrecord.avatar==''" class="ivu-mr-16 avatar" src="./../../../../assets/images/avater.png" />
            <img v-if="data.isSend !== 'true' && wechatrecord.avatar!==''" class="ivu-mr-16 avatar" :src="wechatrecord.avatar || $avatar" />
            <!--发送失败标识-->
            <span class="reject" v-if="data.isSend === 'true' && data.msgSvrId == 0">!</span>
            <span class="dialog" :class="data.isSend === 'true' ? 'dialogright' : 'dialogleft'">
                <!--                <template v-if="+data.deleted === 1">
                    <span style="color:darkgray">消息已撤回</span>
                </template>-->
                <!-- 图片 -->
                <template v-if="data.contentType === 'Picture'||data.contentType === 2">
                    <div class="Picture">
                        <img class="chat-img" @click="leftimgClick(data)" :src="decode(data)" title="点击看大图" alt="图片" />
                    </div>
                </template>
                <!-- 语音 -->
                <template v-else-if="data.contentType === 'Voice'||data.contentType === 3">
                    <audios :ref="`audios-${data.msgSvrId}`" :jgid="data.msgSvrId" :jgsrc="decode(data)" @allpaused="allpaused" />
                </template>
                <!-- 视频 -->
                <template v-else-if="data.contentType === 'Video'||data.contentType === 4">
                    <div class="video-box">
                        <img :src="decode(data)" alt="视频" />
                        <div class="video-boxs" @click="leftvideoClick(data)">
                            <i class="ivu-icon ivu-icon-md-arrow-dropright-circle"></i>
                        </div>
                    </div>
                    <!-- <div class="video-box" v-if="!decode(data).bool">
                        <video :src="decode(data)" controls type="video/mp4" alt="视频"></video>
                        <div class="video-boxs">
                            <i class="ivu-icon ivu-icon-md-arrow-dropright-circle"></i>
                        </div>
                    </div> -->
                </template>
                <template v-else>
                    <span style="word-break: break-all" v-html="decode(data)"></span>
                </template>
            </span>
            <img v-if="data.isSend === 'true'" class="ivu-ml-16 avatar" :src="myWechat.avatar || $avatar"/>
        </div>
        <Modal v-model="content" :width="80" footer-hide @on-visible-change="closeImgClick">
            <p slot="header" style="height:32px;width:100%">
                <Row v-if="patientList && patientList.length > 0 && is_img">
                    <Col :span="16">查看大图</Col>
                    <Col :span="8">
                        <Select v-model="patient_id" placeholder="请选择" style="width: 150px">
                            <Option v-for="item in patientList" :value="item.id" :key="item.id">{{ item.user_name ? item.user_name : '未知' }}</Option>
                        </Select>
                        <Button style="margin-left:12px;" :disabled="!patient_id || !patient_bind_img || (patient_bind_img[`${this.patient_id}`] !== undefined && patient_bind_img[`${this.patient_id}`] === 1)" type="primary" @click="addcase(src.id)">添加到病历</Button>
                    </Col>
                </Row>
            </p>
            <img v-if="is_img" style="width: 100%; height: 80vh; :80% ; object-fit: contain" :src="bigImgUrl"/>
            <video v-if="!is_img" style="width: 100%; height: 80vh; :80vh ; object-fit: contain" :src="bigImgUrl" controls type="video/mp4" alt="视频"></video>
        </Modal>
    </div>
</template>
<script>
import phiz from '@/libs/phiz.js';
import {mapGetters, mapState} from 'vuex';
// import base64 from '@/libs/base64.js'
import audios from './audio';
import { wechatMessageInfo, patientindexaddmedicalimg } from '@/api/hqapi/indexone.js';

export default {
    name: 'dialogbox',
    components: { audios },
    props: {
        data: {
            type: Object,
            default: () => {
                return {
                    Contents: true
                };
            }
        },
        wechatrecord: {
            type: Object,
            default: () => {
                return {};
            }
        },
        myWechat: {
            type: Object,
            default: () => {
                return {};
            }
        },
        id: {
            type: [String, Number],
            default: 0
        }
    },
    data () {
        return {
            patient_id: 0,
            content: false,
            is_img: false,
            bigImgUrl: '',
            // 大图弹框
            src: {
                id: 0,
                is_medical_img: 0,
            },
            patient_bind_img: {},
        };
    },
    computed: {
        ...mapGetters('chatwebsocket/wechat', ['getbigmodal']),
        ...mapState('chatwebsocket/wechat', ['patientList', 'currentFriend', 'currentWechat'])
    },
    watch: {
        getbigmodal: {
            handler (newVal, oldVal) {
                if (newVal !== oldVal) {
                    if (this.data.msgSvrId === newVal.MsgId) {
                        if (newVal.Content === true) {
                            this.content = false;
                            this.$Message.error('查看失败');
                        } else {
                            this.content = true;
                        }
                    } else this.content = false;
                }
            }
        }
    },
    methods: {
        initial () {
            this.$refs[`audios-${this.data.msgSvrId}`].initial();
        },
        allpaused (e) {
            this.$emit('allpaused', e);
        },
        // base64解码 & 不同类型的消息解读
        decode (chat) {
            let content = '';
            if (typeof (chat.content) === 'string') {
                try {
                    // content = base64.b64DecodeUnicode(chat.content)
                    content = chat.content;
                } catch (error) {
                    content = chat.content;
                }
                if (chat.friendId.indexOf('@chatroom') > 0 && !chat.IsSend) {
                    content = unescape(escape(content.replace(/.*?:/, '')).replace('%0A', '%20')).replace(' ', '');
                } else if (chat.friendId.indexOf('@chatroom') > 0 && chat.IsSend && chat.contentType === 'NameCard') {
                    content = unescape(escape(content.replace(/.*?:/, '')).replace('%0A', '%20')).replace(' ', '');
                }
            } else {
                content = chat.content;
            }

            let jcontent = {};
            let jsonReg = /^{.*}$/;
            let thumb = '';
            let str = '';
            try {
                switch (chat.contentType) {
                    // 文本 1
                    case 'Text':
                    case 1:
                        return phiz.qqFaceImgMap(content);
                    // 图片 2
                    case 'Picture':
                    case 2:
                        if (jsonReg.test(content)) {
                            jcontent = JSON.parse(content);
                            thumb = jcontent.content ? jcontent.content : '../../assets/images/imgerror.png';
                        } else {
                            thumb = content;
                        }
                        return thumb;
                    // 语音 3
                    case 'Voice':
                    case 3:
                        thumb = content.replace(/.amr/, '.mp3');
                        str = thumb.replace(/.mp3:.*/, '.mp3');

                        // str = ` <audio src="${thumb}" alt="语音" controls></audio>`
                        return str;
                    // 视频 4
                    case 'Video':
                    case 4:
                        thumb = chat.thumb ? chat.thumb : '../../assets/images/imgerror.png';
                        return thumb;
                    // 系统消息 5
                    case 'System':
                    case 5:
                        return content;
                    // 链接消息 6
                    case 'Link':
                    case 6:
                        return '<div style="color:red">有超链接消息，请在手机查看</div>';
                    // 位置信息 10
                    case 'Location':
                    case 10:
                        return '<div style="color:red">有位置消息，请在手机查看</div>';
                    // 红包 11
                    case 'LuckyMoney':
                    case 11:
                        return '<div style="color:red">有红包，请在手机查看</div>';
                    // 转账 12
                    case 'MoneyTrans':
                    case 12:
                        return '<div style="color:red">有转账，请在手机查看</div>';
                    // Emoji 14
                    case 'Emoji':
                    case 14:
                        if (chat.IsSend === 1) {
                            return `Emoji消息：${content}`;
                        } else {
                            if (jsonReg.test(content)) {
                                jcontent = JSON.parse(content);
                                thumb = jcontent.Thumb ? jcontent.Thumb : '../../assets/images/imgerror.png';
                            } else {
                                thumb = content;
                            }
                            str = `<img class="chat-img" src="${thumb}" alt="图片"/>`;
                            return str;
                        }
                    default:
                        return `不支持的消息，请去手机查看`;
                }
            } catch (error) {
                return chat.contentType + '消息：' + content;
            }
        },
        leftimgClick (item) {
            wechatMessageInfo({
                id: item.id,
                wechatid: this.currentFriend.wechatid,
                friendid: this.currentFriend.friendid,
                source_type: 'weiliao',
            }).then(res => {
                this.is_img = true;
                this.content = true;
                // 渲染数据
                this.bigImgUrl = res.fileUrl || res.content;
                this.src.id = item.id;
                this.src.is_medical_img = item.is_medical_img;
                // 患者是否绑定图片
                this.patient_bind_img = res.patient_bind_img;
            });
        },
        addcase(message_id) {
            if (!this.patient_id || !this.patient_bind_img || (this.patient_bind_img[`${this.patient_id}`] !== undefined && this.patient_bind_img[`${this.patient_id}`] === 1)) {
                // this.$Message.error('查看失败');
                return;
            }

            patientindexaddmedicalimg({ message_id, id: this.patient_id }).then(res => {
                this.$Message.success({
                    content: '添加病历成功'
                });
                this.patient_bind_img[`${this.patient_id}`] = 1;
            });
        },
        closeImgClick(e) {
            if (!e) {
                this.patient_id = 0;
            } else {
                this.patient_id = this.patientList && this.patientList.length > 0 ? this.patientList[0].id : 0;
            }
        },
        leftvideoClick (item) {
            wechatMessageInfo({
                id: item.id,
            }).then(res => {
                this.is_img = false;
                this.content = true;
                // 渲染数据
                this.bigImgUrl = res.content;
            });
        }
    }
};
</script>
<style lang="less">
.dialogbox {
  width: 100%;
  .boxright {
    margin-right: 48px;
    font-size: 10px;
    margin-bottom: 6px;
  }
  .boxleft {
    margin-left: 48px;
    font-size: 10px;
    margin-bottom: 6px;
  }
  &left {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-start;
  }
  &right {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-end;
  }
  .dialog {
    display: inline-block;
    max-width: calc(~"100% - 120px");
    padding: 8px 10px;
    border-radius: 5px;
    position: relative;
    img {
      display: block;
      max-width: 220px;
      min-width: 120px;
      object-fit: contain;
    }
  }
  .dialogleft {
    background-color: #fff;
    &::before {
      content: "";
      position: absolute;
      right: 100%;
      // top:10px;
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: transparent;
      border-right-color: currentColor;
      color: #fff;
    }
  }
  .dialogright {
    background-color: #95ec69;
    &::before {
      content: "";
      position: absolute;
      left: 100%;
      // top:10px;
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: transparent;
      border-left-color: currentColor;
      color: #95ec69;
    }
  }
  .video-box {
    position: relative;
    max-height: 200px;
    overflow: hidden;
    &s {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }
  }
  .Picture {
    position: relative;
    .PictureButton {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: none;
    }
  }
  .Picture:hover {
    .PictureButton {
      display: block;
    }
  }
}

.avatar {
  width: 32px;
  height: 32px;
  line-height: 32px;
  &-big {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}
.dialogboxright{
    align-items:center;
}
.reject{
    background:red;
    color:#fff;
    border-radius:100%;
    display:inline-block;
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    margin-right:5px;
}
</style>
